import React, {useState} from "react";
import {ObjInfo, PojInfoDto} from "@/api/Types/ObjInterfaces.ts";
import {createStyles} from "antd-style";
import {Empty} from "antd";
import Scene from "@/pages/PojPage/RectangularPojView/Scene.tsx";
import SceneSelector from "@/pages/PojPage/RectangularPojView/SceneSelector.tsx";

const useStyle = createStyles(({css, token}) => {
    return {
        container: css`

        `,
        threeScene: css`
            display: block;
            position: fixed;
            left: 0;
            top: 0;
            z-index: -10;
        `
    }
})

interface Props {
    pojInfoDto: PojInfoDto
}

const RectangularPojView: React.FC<Props> = ({pojInfoDto}) => {
    if (pojInfoDto == null) {
        return (
            <Empty/>
        )
    }

    const styles = useStyle().styles;
    const [currentObj, setCurrentObj] = useState<ObjInfo>(pojInfoDto.objInfoList[0])

    return (
        <div className={styles.container}>
            <h1>{pojInfoDto.name}</h1>
            {currentObj != null && <Scene imageLink={currentObj.objLink}/>}
            {
                pojInfoDto.objInfoList != null &&
                pojInfoDto.objInfoList.length > 0 &&
                <SceneSelector objInfoList={pojInfoDto.objInfoList} setObjInfo={(objInfo) => {
                    setCurrentObj(objInfo)
                }}/>
            }
        </div>
    )
}

export default RectangularPojView